<template>
  <section>
    <BaseSlot ref="view" :globalLoading="globalLoading">
      <template slot="table">
        <SetTrading @TradingCycle="TradingCycle" :tradeData="tradeData" />
        <el-row type="flex" justify="space-between" :gutter="20" class="mr_vertical_10">
          <el-col :span="12">
            <Situation :situationData="situationData" />
          </el-col>
          <el-col :span="12">
            <Station :situationData="situationData" :nextSituationData="nextSituationData" />
          </el-col>
        </el-row>
        <el-row>
          <TradeInfo :situationData="situationData" />
        </el-row>
        <el-row type="flex" justify="sapce-between" class="mr_vertical_10" :gutter="20">
          <el-col :span="14">
            <Trend :data="orders.trend" />
          </el-col>
          <el-col :span="10">
            <Proportion :data="orders.percentage" />
          </el-col>
        </el-row>
        <el-row class="mr_vertical_10">
          <Price :situationData="situationData" />
        </el-row>
        <el-row class="mr_vertical_10">
          <ElectricityTrading :situationData="situationData" />
        </el-row>
      </template>
      <!-- <template slot="popup-title">
        <h2>{{ popupTitle }}</h2>
      </template>
      <template slot="popup-body">
        <component
          ref="coreCpt"
          :is="coreCpt"
          :popupTitle="popupTitle"
          :coreData="coreData"
          :isView="isView"
          :isEdit="isEdit"
          @submit="submitTask"
          @close="closeCpt"
        />

      </template>-->
    </BaseSlot>
    <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      width="60%"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="dlgData"
        @selected="selectedf"
        @close="dlgVib = false"
        @refresh="init"
      />
      <el-row type="flex" justify="center">
        <el-button
          size="small"
          type="primary"
          @click="
            () => {
              $refs.dlgCpt.submit();
            }
          "
        >确定</el-button>
        <el-button size="small" @click="dlgVib = false">关闭</el-button>
      </el-row>
    </el-dialog>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import SetTrading from "./common/setTrading.vue";
import Situation from "./common/situation.vue";
import Station from "./common/station.vue";
import TradeInfo from "./common/TradeInfo.vue";
import Trend from "./common/trend.vue";
import Proportion from "./common/proportion.vue";
import Price from "./common/price.vue";
import ElectricityTrading from "./common/electricityTrading.vue";

@Component({
  components: {
    BaseSlot,
    SetTrading,
    Situation,
    Station,
    TradeInfo,
    Trend,
    Proportion,
    Price,
    ElectricityTrading
  }
})
export default class MyApplication extends Vue {
  protected chartData: any = {};
  protected tradOptions: any = null;
  // protected tpno: any = 0;
  protected tradeData: any = 0;
  protected TransactionStatus: any = {};
  protected situationData: any = null;
  protected nextSituationData: any = null;
  protected orders: any = {
    trend: {total_qty: [],time: []},
    percentage: {p2p: {total_qty: 0}, central: {total_qty: 0}}
  }

  protected TradingCycle(tpno: any) {
    if (tpno) {
      this.init(tpno);
      this.getOrders(tpno);
    }
  }
  protected async getOrders(tpno?: any) {
    const params: any = {
      tpno
    };
    await this.$api.getOrdersStat(params).then((res: any) => {
      const {data: {periods, p2p: {total_qty}, central: {total_qty: total_qty_central}}} = res
      this.orders.percentage.p2p.total_qty = total_qty;
      this.orders.percentage.central.total_qty = total_qty_central;
      this.orders.trend.total_qty = [];
      this.orders.trend.time = [];
      periods && periods.length && periods.forEach((el: any) => {
        this.orders.trend.total_qty.push(el.total_qty);
        this.orders.trend.time.push(el.time);
      })
    });
  }
  protected init(tpno?: any) {
    try {
      const params: any = {
        tpno
      };
      this.$api.getTradePeriodsGet(params).then((res: any) => {
        this.$set(this, "situationData", res.data);
        const currentTpno = localStorage.getItem('currentTpno');
        const nextTpno = localStorage.getItem("nextTpno");
        if (tpno === currentTpno) {
          this.$api.getTradePeriodsGet({tpno: nextTpno}).then((resNext: any) => {
            this.$set(this, "nextSituationData", resNext.data);
          });
        } else {
          this.$set(this, "nextSituationData", {noData: true});
        }
      });
    } catch (error) {
    } finally {
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.mr_w_10 {
  margin: 0 10px;
}
.margin-right {
  margin-right: 30px;
}
</style>


